<template>
  <div v-if="data">
    <div class="nav">
        <div class="nav-cell" :class="{'cur':curNav==='hotRecommends'}" @mouseover="curNav='hotRecommends'">热门推荐</div>
        <div class="nav-cell" :class="{'cur':curNav==='hotGames'}" @mouseover="curNav='hotGames'">热门手游</div>
        <div class="nav-cell" :class="{'cur':curNav==='hotSofts'}" @mouseover="curNav='hotSofts'">热门软件</div>
    </div>
    <el-card v-if="curNav==='hotRecommends'" shadow="hover" :body-style="{ padding: '0px', width: 'calc(100% - 120px)', float: 'right' }" >
      <div class="top-card">
        <div class="top-card-it" v-for="item in data.hotRecommends" :key="item.id" @click="gotoDetail(item, $router, axios)">
          <img :src="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </div>
    </el-card>
    <el-card v-if="curNav==='hotGames'" shadow="hover" :body-style="{ padding: '0px', width: 'calc(100% - 120px)', float: 'right' }" >
      <div class="top-card">
        <div class="top-card-it" v-for="item in data.hotGames" :key="item.id" @click="gotoDetail(item, $router, axios)">
          <img :src="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </div>
    </el-card>
    <el-card v-if="curNav==='hotSofts'" shadow="hover" :body-style="{ padding: '0px', width: 'calc(100% - 120px)', float: 'right' }" >
      <div class="top-card">
        <div class="top-card-it" v-for="item in data.hotSofts" :key="item.id" @click="gotoDetail(item, $router, axios)">
          <img :src="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

defineProps({
    data: {
        type: Array,
        default: () => []
    }
});

const curNav = ref('hotRecommends');
</script>

<style lang="less" scoped>
.nav {
    position: absolute;
    width: 120px;
    height: 140px;
    .nav-cell {
        font-size: 16px;
        text-align: center;
        height: 33.33%;
        line-height: 46.6px;
        color: #1D2127;
        cursor: pointer;
        border-radius: 8px;
        &:hover {
            background-color: @theme-color;
            color: #fff;
            &::after {
                content: '';
                display: inline-block;
                position: relative;
                right: -30px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 5px solid @theme-color;
                font-size: 0;
                line-height: 0;
                vertical-align: middle;
                transform: rotate(90deg);
            }
        }
    }
    .cur {
        background-color: @theme-color;
        color: #fff;
        &::after {
            content: '';
            display: inline-block;
            position: relative;
            right: -30px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid @theme-color;
            font-size: 0;
            line-height: 0;
            vertical-align: middle;
            transform: rotate(90deg);
        }
    }
}
.top-card {
    display: flex;
    align-items: center;
    height: 140px;
    background: #fff;
    padding: 10px;
    justify-content: space-between;

    &-it {
        width: 120px;
        display: flex;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            object-fit: cover;
        }

        &:hover img {
            width: 100px;
            height: 100px;
            transition: all 0.1s;
        }
        span {
            margin-top: 5px;
            font-size: 16px;
            font-weight: 400;
            color: #1d2127;
            line-height: 16px;
        }
    }
}
</style>
